 // 基于准备好的dom，初始化echarts实例
var myChart  = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));

// 指定图表的配置项和数据
var option = {
    backgroundColor: '#f3f3f3',
    title: {
        text: '摄入量',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
        },
        left: '6%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: ["2017/08/01","2017/08/02","2017/08/03","2017/08/04","2017/08/05"]
    }],
    yAxis: [{
        type: 'value',
        name: '单位（大卡）',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            }
        },
        splitLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    }],
    series: [{
        name: '饮食',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137, 189, 27, 0.3)'
                }, {
                    offset: 1,
                    color: 'rgba(137, 189, 27, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        itemStyle: {
            normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

            }
        },
        data: [220, 182, 191, 134, 150]
    } ]
};

var option2 = {
    backgroundColor: '#f3f3f3',
    title: {
        text: '运动量',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
        },
        left: '6%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: ["2017/08/01","2017/08/02","2017/08/03","2017/08/04","2017/08/05"]
    }],
    yAxis: [{
        type: 'value',
        name: '单位（分钟）',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            }
        },
        splitLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    }],
    series: [{
        name: '时长',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 136, 212, 0.3)'
                }, {
                    offset: 1,
                    color: 'rgba(0, 136, 212, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        itemStyle: {
            normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

            }
        },
        data: [120, 110, 125, 145, 122]
    }]
};

var option3 = {
    backgroundColor: '#f3f3f3',
    title: {
        text: '体重记录',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
        },
        left: '6%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: ["2017/08/01","2017/08/02","2017/08/03","2017/08/04","2017/08/05"]
    }],
    yAxis: [{
        type: 'value',
        name: '单位（kg）',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            }
        },
        splitLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    }],
    series: [{
        name: '体重',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(219, 50, 51, 0.3)'
                }, {
                    offset: 1,
                    color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        itemStyle: {
            normal: {

                color: 'rgb(219,50,51)',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
            }
        },
        data: [220, 182, 125, 145, 122]
    }]
};

$.ajax({
        url: "tzserver.php?act=select",
        data: {mydata: ""},
        type: 'POST',
        dataType: 'html'
    })
    .done(function(data) {
        var arry = JSON.parse(data);
        console.log(arry);
        var xAxisArray = [];
        var srldata = [];
        var ydldata = [];
        var tzdata = [];
        for (var i = 0; i < arry.length; i++) {
            xAxisArray.push(arry[i].date);
            srldata.push(arry[i].energy);
            ydldata.push(arry[i].movement);
            tzdata.push(arry[i].weight);
        }
        option.xAxis[0].data = xAxisArray;
        option2.xAxis[0].data = xAxisArray;
        option3.xAxis[0].data = xAxisArray;
        option.series[0].data = srldata;
        option2.series[0].data = ydldata;
        option3.series[0].data = tzdata;
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    });

